<template>
    <div class="main pl32 pt24 pr32 selectMember-box">
        <div class="title space-between">
            <span class="ft16 fw6 fc-black">{{ title }}</span>
            <div class="align-row-center">
                <div class="mr24">
                    <el-input type="input"  v-model="searchName" placeholder="输入姓名开始搜索" @input="searchMember" ></el-input>
                </div>
                <i class="icon ic_close" @click="closeFn"></i>
            </div>
        </div>
        <div class="content fc-black ft14">
            <div class="pt24 pb24" v-text="$store.state.userInfo.companyName"></div>
            <div class="scrollbar-y">
                <div class="lists">
                    <div class="list pt24" v-for="(item,index) in dataList" :key="index" v-if="item.userList != null && item.userList.length > 0">
                        <p class="pb24" v-text="item.name"></p>
                        <div class="radio_list" v-if="item.userList != null && item.userList.length > 0">
                            <div class="pr48 pb24" v-for="(item2,index2) in item.userList" :key="index2">
                                <el-radio v-model="radio" :label="item2.userId">{{ item2.name }}</el-radio>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-btns pt8">
            <div class="save-btn" @click="callback">确定</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'messageBox',
    props:{
        indexClose:{
            type:String,
            default:'close',
            required:false,
        },
        title:{
            type:String,
            default:'',
            required:false,
        },
        select:{
            type:[String,Number],
            default:'',
            required:false,
        },
        search:{
            type:Object,
            default: function() {
                return {companyId:''};
            },
            required:false,
        }
    },
    data() {
        return {
            radio:'',
            searchName:'',
            timerIndex:'',
            dataList:[]
        }
    },
    created() {
        this.search.companyId = this.$store.state.userInfo.companyId;
        this.radio = this.select;
    },
    mounted(){
        this.getMemberList();
    },
    methods: {
        //关闭
        closeFn() {
            this.$emit("close",this.indexClose);
        },
        callback() {
            let json = this.getMemberObj(this.radio);
            this.$emit("callback",this.radio,this.indexClose,json);
        },
        searchMember(){
            clearTimeout(this.timerIndex);
            this.timerIndex = setTimeout( () => {
                this.search.name = this.searchName;
                this.getMemberList();
            },1000);
        },
        //获取成员列表
        getMemberList(){
            this.$http.get('/user/department/user/list', {
                params: this.search
            }).then( res =>{
                if(res.statusCode == 200){
                    this.dataList = res.data || [];
                }else{
                    this.dataList = [];
                }
            }).catch(error => {
                console.log(error);
            });
        },
        getMemberObj(id){
            let json = {};
            if(id != '' && id != 0 && this.dataList.length > 0){
                this.dataList.forEach( item =>{
                    if(item.userList != null & item.userList.length > 0){
                        item.userList.forEach(item2 =>{
                            if(item2.userId == id){
                                json = item2;
                                json.departmentName=item.name;
                                return json;
                            }
                        });
                    }
                })
            }
            return json;
        }
    }
}
</script>

<style scoped lang="scss" type="text/scss">
.main {
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 6px;
    width: 575px;
	  height: 384px!important;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    >.title{
        height:32px;
    }
    >.content{
        .scrollbar-y{
            height:200px;
			display:flex;
            flex-wrap:wrap;
            .lists{
                width:100%;
                height:100%;
                overflow-y:auto;
                &::-webkit-scrollbar {
                    display: none
                }
                -ms-overflow-style: none; /* IE 10+ */
                scrollbar-width: none; /* Firefox */
                .list{
                    border-top:1px solid #eeeeee;
                    .radio_list{
                        display:flex;
                        flex-wrap:wrap;
                    }
                }
            }
        }
    }
    .modal-btns{
        display: flex;
        flex-direction:row-reverse;
    }
    .cancel-btn, .save-btn {
        display: inline-block;
        border-radius: 6px;
        width: 88px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
    }
    .save-btn {
        background-color: #0755db;
        color: #FFFFFF;
    }
    .cancel-btn {
        color: #b3c0c9;
    }
}
</style>
<style lang="scss" type="text/scss">
  .selectMember-box{
    .title {
      .el-form-item__label {
        padding-right: 16px;
      }
      .el-input__inner, .el-textarea__inner {
        height:32px;
        line-height:32px;
        width: 260px;
        padding:0 11px;
        background-color: #f2f6f9;
      }
      .el-date-editor--date, .el-date-editor--time {
        .el-input__inner {
          width: 176px;
        }
      }
      .el-input__inner:focus, .el-textarea__inner:focus {
        background-color: #FFFFFF;
      }
      .line-time {
        width: 20px;
      }
    }
  }

</style>
